<template>
  <div class="map" :style="{ transform: `scale(${1 / pageZoom})` }">
    <div :id="id" class="mapContainer"></div>
    <input type="text" id="suggestId" placeholder="搜索地名" v-show="false" />
    <div class="test" v-show="false"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, toRefs } from 'vue'

const $props = defineProps({
  configJson: {
    type: Object,
    default: () => {
      return {
        id: 'mapContainer',
        LNG: 113.06, // 经度
        LAT: 23.02, //维度
        zoom: 9, // 缩放
        pageZoom: 1, // 重点自适应缩放
        mapType: BMAP_SATELLITE_MAP // 地图类型
      }
    }
  }
})
const { id, LNG, LAT, zoom, pageZoom, mapType } = toRefs($props.configJson)

let bmap = ref(null)

const initMap = () => {
  if (!bmap.value) {
    bmap.value?.clearOverlays()
    // 实例化地图对象
    bmap.value = new window.BMapGL.Map(id.value, {
      mapType: mapType.value // 卫星地图类型
    })
    // 中间点与缩放初始化
    bmap.value.centerAndZoom(new window.BMapGL.Point(LNG.value, LAT.value), zoom.value)
    // 启用键盘操作
    bmap.value.enableKeyboard()
    // 启用鼠标缩放
    bmap.value.enableScrollWheelZoom()
    // 启用拖拽
    bmap.value.enableInertialDragging()
    // 启用连续缩放
    bmap.value.enableContinuousZoom()
    // 添加缩放控件
    // bmap.value.addControl(new window.BMapGL.NavigationControl())
    //搜索控件
    let ac = new window.BMapGL.Autocomplete({
      // suggestId 是输入框id
      input: 'suggestId',
      //  这个是地图实例
      location: bmap.value
    })
    // 搜索触发
    ac.addEventListener('onconfirm', function (e) {
      // 把城市啥的拼接起来
      const myValue =
        e.item.value.province +
        e.item.value.city +
        e.item.value.district +
        e.item.value.street +
        e.item.value.business
      // 搜索
      // 搜索结束执行的函数
      const mySearchFun = () => {
        // 传入定位函数的经纬度
        getAddOverlay(local.getResults().getPoi(0).point, true)
      }
      // 创建一个搜索的实例
      let local = new window.BMapGL.LocalSearch(bmap.value, {
        //搜索成功后的回调
        onSearchComplete: mySearchFun
      })
      // 传入搜索位置的关键字
      local.search(myValue)
    })
    window[`bmap_${id.value}`] = bmap.value
  }
}

const getAddOverlay = (point, centerAndZoom = false) => {
  console.log(point)
  // 清空地图上所有的标准当然你想要多个点的话可以不清除
  bmap.value.clearOverlays()
  let marker = new window.BMapGL.Marker(point) // 创建标注
  bmap.value.addOverlay(marker) // 添加到地图

  centerAndZoom && bmap.value.centerAndZoom(point, 15) // 中心点位 15是级别

  // 把定位转换为详细文字地址

  // 把位置传出
  // eslint-disable-next-line no-undef
  emits('addressData', point)
}

onMounted(() => {
  initMap()
})

onUnmounted(() => {
  bmap.value && bmap.value.destroy()
  delete window[`bmap_${id.value}`]
})
</script>

<style lang="less" scoped>
@import './index.less';
</style>

<style>
.BMap_cpyCtrl,
.anchorBL {
  display: none !important;
}
</style>
